<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>尤迈桃李会</title>
    <script src="js/rem.js"></script>
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/jquery-weui.min.css">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/index.css">
    <script>(function() {var _53code = document.createElement("script");_53code.src = "https://tb.53kf.com/code/code/96d8f960b261e49515450f8953b044bc5/1";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(_53code, s);})();</script>
</head>
<body>
    <div class="pub_bar" title="尤迈桃李会" left="back"></div>
    <!--  -->
    <div class="pub-container has-tabbar  bgwhite">
        <!-- 公共部分 - header -->
        <header class="pub-header">
            <div class="header-box">
                <input type="text" class="search" placeholder="">
                <a href="./ot-myClass.html">
                    <div class="footprint">足迹</div>
                </a>
                <a href="./ot-signIn.html">
                    <div class="sign-in">签到</div>
                </a>
            </div>
        </header>

        <!-- 公共 - 菜单 -->
        <div class="pub-menu plr15">
            <ul class="menu-list">
                <li class="menu-item active">
                    <a href="#">推荐</a>
                </li>
                <li class="menu-item">
                    <a href="#">癫痫病</a>
                </li>
                <li class="menu-item">
                    <a href="#">白内障</a>
                </li>
                <li class="menu-item">
                    <a href="#">白内障</a>
                </li>
                <li class="menu-item">
                    <a href="#">癫痫病</a>
                </li>
                <li class="menu-item">
                    <a href="#">白内障</a>
                </li>
            </ul>
        </div>

        <!-- 公共 - banner -->
        <div class="pub-banner plr15" id="topBanner">
            <!-- <div id="player" style="height: 300px;"></div> -->
            <!-- <div id="topBanner"></div> -->
            <!-- <a href="javascript:;"><img  src="image/placeholder/1.jpg" alt=""></a> -->
        </div>

        <!-- 讲堂 - 列表 -->
        <div class="pub-main classroom-main space-border">
            <!-- 讲堂 - tab -->
            <ul class="classroom-tabs space-border" id="tabBox">
                <li class="classroom-tab active" data-type="1">预约</li>
                <li class="classroom-tab" data-type="2">开讲</li>
                <li class="classroom-tab" data-type="3">重播</li>
                <li class="classroom-tab" data-type="new">资讯</li>
            </ul>
            <ul class="pub-list" id="contBox">
                <li class="active">
                    <div class="list case-list" id="list1">
                    </div>
                    <div class="weui-loadmore loadMore">
                        <i class="weui-loading"></i>
                        <span class="weui-loadmore__tips">正在加载</span>
                    </div>
                    <div class="weui-loadmore weui-loadmore_line noMore hide">
                        <span class="weui-loadmore__tips">没有更多数据了</span>
                    </div>
                </li>
                <li>
                    <div class="list case-list" id="list2">
                    </div>
                    <div class="weui-loadmore loadMore">
                        <i class="weui-loading"></i>
                        <span class="weui-loadmore__tips">正在加载</span>
                    </div>
                    <div class="weui-loadmore weui-loadmore_line noMore hide">
                        <span class="weui-loadmore__tips">没有更多数据了</span>
                    </div>
                </li>
                <li>
                    <div class="list case-list" id="list3">
                    </div>
                    <div class="weui-loadmore loadMore">
                        <i class="weui-loading"></i>
                        <span class="weui-loadmore__tips">正在加载</span>
                    </div>
                    <div class="weui-loadmore weui-loadmore_line noMore hide">
                        <span class="weui-loadmore__tips">没有更多数据了</span>
                    </div>
                </li>
                <li>
                    <div class="list new-list" id="list4">
                    </div>
                    <div class="weui-loadmore loadMore">
                        <i class="weui-loading"></i>
                        <span class="weui-loadmore__tips">正在加载</span>
                    </div>
                    <div class="weui-loadmore weui-loadmore_line noMore hide">
                        <span class="weui-loadmore__tips">没有更多数据了</span>
                    </div>
                </li>
            </ul>
        </div>
        
        <!-- 公共footer -->
        <div class="pub-footer">
            <ul class="tabs">
                <li class="tab-classroom"><a href="./ot-classroom-index.html">首页</a></li>
                <li class="tab-doctor"><a href="./ot-doctor-index.html">名医</a></li>
                <li class="tab-curriculum"><a href="./ot-curriculum-index.html">课程</a></li>
                <li class="tab-forum active"><a href="./classroom-index.html">讲堂</a></li>
                <li class="tab-consultation"><a href="consultation-index.html">会诊</a></li>
                <li class="tab-user"><a href="user.html">我的</a></li>
            </ul>
        </div>

        <!-- 预约弹窗 -->
        <div class="reserve popup">
            <div class="cont login-wrapper plr15">
                <div class="tit" id="reserveTit">预约</div>
                <form action="#" method="post" onsubmit="reverseSubmit();return false;" id="reserveForm" autocomplete="false">
                    <ul class="list">
                        <li><input class="input" name="loginMobile" type="text" placeholder="请输入手机号码"></li>
                        <li class="other-btns flex-btw">
                            <input class="input" name="checkCode" type="text" placeholder="请输入手机验证码">
                            <span class="get-code-btn" id="getCodeBth">获取验证码</span>
                        </li>
                    </ul>
                    <input class="pub-submit-btn" id="reserveBtn" type="submit" value="马上预约">
                </form>
            </div>
        </div>

        <!-- 视频播放弹窗 -->
        <div class="video popup">
            <div class="cont" id="player">
            </div>
        </div>
    </div>
    
    <script src="https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-h5-min.js"></script>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/jquery-weui.min.js"></script>
    <script src="js/md5.js"></script>
    <script src="js/public.js"></script>
    <script>
        // 获取预约列表
        var $contBoxList = $('#contBox li');
        var pageStatus = {
            1: {
                currentPage: 1,
                loadEnd: false,
                getList: function(){
                    getReserve('1');
                },
                $listEle: $contBoxList.eq(0)
            },
            2: {
                currentPage: 1,
                loadEnd: false,
                getList: function(){
                    getReserve('2');
                },
                $listEle: $contBoxList.eq(1)
            },
            3: {
                currentPage: 1,
                loadEnd: false,
                getList: function(){
                    getReserve('3');
                },
                $listEle: $contBoxList.eq(2)
            },
            new: {
                currentPage: 1,
                loadEnd: false,
                getList: function(){
                    getNewList();
                },
                $listEle: $contBoxList.eq(3)
            }
        }
        var type = '1';
        
        // 获取广告列表
        function getBanner(){
            // 获取顶部
            http('/ad/getAllAd', {
                hasToken: false,
                data: {
                    id: '1' // 广告图位置 1 顶部 2 中部
                },
                success: function(res){
                    if(res.code === '01'){
                        res.data.length > 0 ? $('#topBanner').html(getAdHtml(res.data[0])).show() : $('#topBanner').hide();
                    }
                }
            })
        }

        // 获取讲堂列表
        function getReserve(type){
            var pageS = pageStatus[type];
            if(pageS.loadEnd) return;
            var userId = getCookie('userId');
            var option = {
                currentPage: pageS.currentPage,
                pageSize: PAGESIZE,
                type: type
            };

            // 预约已登录，入参传userId
            if(userId) {
                option.userId = userId;
            }

            http('/ad/getAllReserve', {
                hasToken: false,
                data: option,
                success: function(res){
                    if(res.code === '01'){
                        var data = res.data, html = '';
                        data.forEach(function(item){
                            var timeInteval = format(item.startTime)
                            html += '<a href="classroom-detail.html?id=' + item.classId + '" data-classId="' + item.classId + '">' + 
                                '<dl class="item space-border">' + 
                                    '<dt class="mh194">' + 
                                        '<img class="case-img" src="' + item.imgUrl + '" alt="">' + 
                                        '<p class="pub-case-date">开讲时间:' + item.startTime + '</p>' + 
                                    '</dt>' + 
                                    '<dd>' + item.title + '</dd>' + 
                                    '<dd class="pub-case-info clearfloat">' + 
                                        '<span class="name">开讲专家:' + item.name + '</span>'
                            // 点赞
                            if(item.goodStatus == 1){
                                html += '<span class="subscribe active">' + getNumberHtml(item.good) + '</span>'
                            }else {
                                html += '<span class="subscribe">' + getNumberHtml(item.good) + '</span>'
                            }

                            // 预约、报名
                            if(type === '1'){
                                if(item.reserveStatus == 1){
                                    html += '<button class="haved-subscribe">已预约' + getNumberHtml(item.people) + '</button>';
                                }else{
                                    html += '<button class="subscribe-btn" data-type="1"><span class="text">预约</span>' + getNumberHtml(item.people) + '</button>';
                                }
                            }else if(type === '2'){
                                if(item.reserveStatus == 1){
                                    html += '<button class="haved-subscribe">已报名' + getNumberHtml(item.people) + '</button>';
                                }else{
                                    html += '<button class="subscribe-btn" data-type="2"><span class="text">报名</span>' + getNumberHtml(item.people)+ '</button>';
                                }
                            }
                            html +=  '</dd>' + 
                                '</dl>' + 
                            '</a>';
                        })

                        pageS.loadEnd = (data.length < PAGESIZE);

                        var $list;
                        switch(type){
                            case '1': $list = $('#list1'); break;
                            case '2': $list = $('#list2'); break;
                            case '3': $list = $('#list3'); break;
                        }
                        
                        pageS.currentPage == 1 ? $list.html(html) : $list.append(html);
                        pageS.currentPage++;

                        loadTip(pageS);
                    }
                },
                complete: function(){
                    loading = false;
                }
            })
        }
        
        // 获取资讯列表
        function getNewList(){
            var newOption = pageStatus.new;
            http('/ad/getAllNews', {
                hasToken: false,
                noEncry: true,
                data: {
                    id: 1,
                    currentPage: newOption.currentPage,
                    pageSize: PAGESIZE
                },
                success: function(res){
                    if(res.code === '01'){
                        var data = res.data, html = '';
                        data.forEach(function(item){
                            html += '<a href="consultation-detail.html?type=new&id=' + item.newsId + '">' + 
                                '<dl class="item">' + 
                                    '<dt><h3>' + item.title + '</h3></dt>' + 
                                    '<dd class="info">' + 
                                        '<div class="text cut2">' + item.detail + '</div>' + 
                                        '<p class="date">' + format(item.createTime) + '</p>' + 
                                        '<div class="img">' + 
                                            '<img src="' + item.file.uploadUrl + '" alt="' + item.file.uploadName + '">';
                                        if(item.videoId){
                                            html += '<i class="pub-i-play small"></i>'
                                        }
                                html += '</div>' + 
                                    '</dd>' + 
                                '</dl>' + 
                            '</a>';
                        })

                        // 判断是否是最后一页
                        newOption.loadEnd = (data.length < PAGESIZE);

                        // 判断是否是第一页
                        newOption.currentPage == 1 ? $('#list4').html(html) :  $('#list4').append(html);
                        
                        newOption.currentPage++;
                        loadTip(newOption);
                    }
                },
                complete: function(){
                    loading = false;
                }
            });
        }

        // 页面初始化
        getBanner();
        for(var key in pageStatus){
            pageStatus[key].getList();
        }

        // tab切换
        $('#tabBox li').click(function(){
            $(this).addClass('active').siblings().removeClass('active');
            $('#contBox > li').removeClass('active').eq($(this).index()).addClass('active');
            type = $(this).attr('data-type');
        })

        // 预约
        var $subscribeBtn;
        $('#list1, #list2').on('click', '.subscribe-btn', function(e){
            $subscribeBtn = $(e.currentTarget);
            e.preventDefault();
            // if($subscribeBtn.siblings('.subscribe').hasClass('active')) {return};
            var type = $subscribeBtn.attr('data-type');
            var userId = getCookie('userId');
            if(userId){
                http('/ad/saveReserve', {
                    hasToken: false,
                    data: {
                        loginMobile: localStorage.getItem('mobile'),
                        userId: userId,
                        classId: $subscribeBtn.parents('a').attr('data-classId')
                    },
                    success: function(res){
                        if(res.code === '01'){
                            var count = Number($subscribeBtn.children('.number').html()) + 1;
                            if(type== 1){
                                toast('预约成功');
                                $subscribeBtn.children('.text').html('已预约');
                            }else {
                                toast('报名成功');
                                $subscribeBtn.children('.text').html('已报名');
                            }
                            $subscribeBtn.children('.number').html(count);
                            $subscribeBtn.addClass('haved-subscribe').removeClass('subscribe-btn');
                        }
                    }
                })
            }else {
                if(type === '1'){
                    $('#reserveTit').html('预约');
                    $('#reserveBtn').val('马上预约');
                }else {
                    $('#reserveTit').html('报名');
                    $('#reserveBtn').val('马上报名');
                }
                $('.reserve.popup').show();
            }
        })
        // 预约弹窗 - 未登录状态
        $('.reserve.popup').click(function(){
            $(this).hide();
            closePopup();
        })
        $('.reserve.popup .cont').click(function(e){
            e.stopPropagation();
        })
        function reverseSubmit(){
            var option = $('#reserveForm').serializeObject();

            // 数据验证
            if(validEmpty(option.loginMobile, '手机号不能为空')) return false;
            if(validEmpty(option.checkCode, '验证码不能为空')) return false;
            if(validPhone(option.loginMobile)) return fasle;

            var type = $subscribeBtn.attr('data-type');
            option.classId = $subscribeBtn.parents('a').attr('data-classId');
            
            http('/ad/saveReserve', {
                hasToken: false,
                data: option,
                success: function(res){
                    if(res.code === '01'){
                        setCookie('token', res.data.token);
                        setCookie('userId', res.data.userId, 1);
                        localStorage.setItem("mobile", option.loginMobile);
                        closePopup();
                        $('.reserve.popup').hide();
                        if(type== 1){
                            toast('预约成功');
                        }else {
                            toast('报名成功');
                        }
                        var currOption1 = pageStatus[1];
                            currOption1.loadEnd = false;
                            currOption1.currentPage = 1;
                        var currOption2 = pageStatus[2];
                            currOption2.loadEnd = false;
                            currOption2.currentPage = 1;
                            getReserve('1');
                            getReserve('2');
                    }else if(res.code === '09'){
                        setCookie('token', res.data.token);
                        setCookie('userId', res.data.userId, 1);
                        localStorage.setItem("mobile", option.loginMobile);
                        closePopup();
                        $('.reserve.popup').hide();
                        var currOption1 = pageStatus[1];
                            currOption1.loadEnd = false;
                            currOption1.currentPage = 1;
                        var currOption2 = pageStatus[2];
                            currOption2.loadEnd = false;
                            currOption2.currentPage = 1;
                            getReserve('1');
                            getReserve('2');
                    }
            }
            })
        }
        // 发送验证码
        var sendStatus = false;
        $('#getCodeBth').click(function(){
            if(sendStatus) return;
            var phone = $.trim($('[name=loginMobile]').val());
            // 数据验证
            if(validEmpty(phone, '手机号不能为空')) return;
            if(validPhone(phone)) return;

            sendStatus = true;
            getCode($(this), phone, 'reserve')
        })

        // 初始化加载更多
        var loading = false
        $(document.body).infinite().on("infinite", function() {
            if(loading) return;
            var currOption = pageStatus[type];

            loadTip(currOption);
            if(currOption.loadEnd) return;
            loading = true;
            currOption.getList();
        });

        // 显示加载状态
        function loadTip(option){
            if(option.loadEnd){
                option.$listEle.find('.noMore').show();
                option.$listEle.find('.loadMore').hide();
            }else {
                option.$listEle.find('.noMore').hide();
                option.$listEle.find('.loadMore').show();
            }
        }
        
        // 点赞
        $('#list1, #list2, #list3').on('click', '.subscribe', function(e){
            e.preventDefault();
            $target = $(e.currentTarget);
            subscribe($target)
        })
        function subscribe($target){
            var userId = getCookie('userId');
            if(userId){
                http('/ad/saveGood', {
                    hasToken: false,
                    data: {
                        userId: userId,
                        classId: $target.parents('a').attr('data-classId')
                    },
                    success: function(res){
                        if(res.code === '01'){
                            if(res.data.goodStatus === '1'){
                                toast('点赞成功');
                                $target.addClass('active').html(getNumberHtml(res.data.good));
                            }else {
                                toast('取消点赞成功');
                                $target.removeClass('active').html(getNumberHtml(res.data.good));
                            }
                        }
                    }
                })
            }else {
                window.location.href = 'login-code.html';
            }
        }
    </script>
</body>
</html>